<template>
    <!--系统设置-用户管理-->
<el-container class="system-hmax">
    <el-aside class="system-side" width="200px">
        <div class="system-title">功能结构</div>
        <div class="system-side-con">
            <el-input
            placeholder="请输入内容"
            v-model="suggest"
            size="mini"
            clearable>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <div class="system-side-scroll">
                <el-scrollbar style="height:100%;">
                    <Menus :treeview="treeview" @choosetree="choosetree" ref="menus"></Menus>
                </el-scrollbar>                
            </div>
        </div>
        
    </el-aside>
    <el-main style="position:relative;padding-bottom:0px;">
        <div class="system-wide">
            <div class="system-title" style="margin-bottom:10px;">用户列表</div>
            
            <el-form :model="form" size="mini" label-width="10px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-input placeholder="请输入内容" v-model="form.keyword" />
                        </el-form-item>                        
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="">
                            <el-button type="primary" icon="el-icon-search" @click="search(true)" :loading="searchstatus">搜索</el-button>
                            <el-button type="success" icon="el-icon-edit-outline" @click="addUser()">新建</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="delUser()">删除</el-button>
                            <el-button type="warning" icon="el-icon-sort" @click="resetPassword()">重置密码</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="height:calc(100% - 130px);overflow-y:scroll;">
                <el-table :data="tabledata" size="mini" border stripe  max-height="280px" ref="userlist" v-loading="searchstatus">
                    <el-table-column
                    type="selection"
                    width="55px" fixed="left">
                    </el-table-column>
                    <el-table-column
                        label="登录账号">
                        <template slot-scope="scope">
                            {{scope.row.account}}
                        </template>
                    </el-table-column>                
                    <el-table-column
                        label="姓名">
                        <template slot-scope="scope">
                            {{scope.row.name}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="用户编码">
                        <template slot-scope="scope">
                            {{scope.row.usercode}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="所属部门">
                        <template slot-scope="scope">
                            {{scope.row.department}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="性别">
                        <template slot-scope="scope">
                            {{getSexname(scope.row.sex)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态">
                        <template slot-scope="scope">
                            {{getStatename(scope.row.state)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="身份证号">
                        <template slot-scope="scope">
                            {{scope.row.idcardno}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="最后登录时间">
                        <template slot-scope="scope">
                            {{scope.row.logintime}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="电话">
                        <template slot-scope="scope">
                            {{scope.row.telphone}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="问题">
                        <template slot-scope="scope">
                            {{getPasstips(scope.row.passtips)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="答案">
                        <template slot-scope="scope">
                            {{scope.row.passtipsvalue}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="注册时间">
                        <template slot-scope="scope">
                            {{scope.row.registertime}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="邮件">
                        <template slot-scope="scope">
                            {{scope.row.email}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="editUser(scope.row.id)">编辑</el-button>
                        </template>
                    </el-table-column> 
                </el-table>
            </div>
            
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.now"
            :page-sizes="page.sizes"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total" class="pagination">
            </el-pagination>
        </div>
    </el-main>
    <!--dialog-->
    <el-dialog title="用户基本信息"  :visible.sync="dialog.isVisible" width="50%" top="10vh">
        <el-form label-width="120px" size="mini">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="登录账号">
                        <el-input v-model="dialog.account"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名">
                        <el-input v-model="dialog.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证">
                        <el-input v-model="dialog.idcardno"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-select v-model="dialog.sex" placeholder="请选择" style="width:100%;">
                            <el-option
                            v-for="item in select.sexs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色">
                        <el-select v-model="dialog.rolename" placeholder="请选择" style="width:100%;">
                            <el-option
                            v-for="item in select.roles"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码提示问题">
                        <el-select v-model="dialog.passtips" placeholder="请选择" style="width:100%;">
                            <el-option
                            v-for="item in select.asktips"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码提示答案">
                        <el-input v-model="dialog.passtipsvalue"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电子邮件">
                        <el-input v-model="dialog.email"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话">
                        <el-input v-model="dialog.telphone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门">
                        <el-input v-model="dialog.department" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-checkbox v-model="dialog.state">启用</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="textcenter">
            <el-button type="primary" size="mini" @click="saveUser()">确定</el-button>    
            <el-button type="info" @click="dialog.isVisible = false"  size="mini">返回</el-button>  
        </div>
    </el-dialog>
</el-container>
    
</template>
<script>
import Menus from '@/components/Menus'
import {userData} from '@/ajax/data'
export default {
    data(){
        return {
            searchstatus:false,
            suggest:'',
            form:{
                search:'',
                keyword:''
            },
            treeview:{
                kind:'user',
                checkbox:false,
                data:userData,
                choose:[],
                expanded:[],
                props:{
                    children: 'children',
                    label: 'name'
                }
            },
            tabledata:[],
            beforeSearchData:[],
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            dialog:{
                isVisible:false,
                account:'',
                name:'',
                idcardno:'',
                sex:'1',
                rolename:'',
                passtips:'1',
                passtipsvalue:'',
                email:'',
                telphone:'',
                department:'管理处',
                state:true
            },
            select:{
                fnaddress:[],
                icons:[],
                asktips:[
                    {label:"我的名字",value:'1'},
                    {label:"我的生日",value:'2'},
                    {label:"我的身份证号码",value:'3'},
                    {label:"我喜欢的人",value:'4'},
                    {label:"其它",value:'5'}
                ],
                states:[
                    {label:"启用",value:'1'},
                    {label:"禁用",value:'0'}
                ],
                sexs:[
                    {label:"男",value:'1'},
                    {label:"女",value:'0'}
                ],
                roles:[
                    {label:"超级管理员",value:'超级管理员'},
                    {label:"网约车用户",value:'网约车用户'},
                    {label:"普通用户",value:'普通用户'},
                    {label:"测试角色",value:'测试角色'}
                ]
            },

            testData:[
                {
                    userid:11,
                    children:[
                        {
                            id:'1',
                            account:'admin',
                            name:'管理员',
                            idcardno:'610103195602030011',
                            sex:'1',
                            rolename:'超级管理员',
                            passtips:'1',
                            passtipsvalue:'myname',
                            email:'test139@139.com',
                            telphone:'15031291234',
                            department:'管理处',
                            logintime:'2019-10-27 11:12',
                            registertime:'2019-10-26 11:12'
                        },
                        {
                            id:'2',
                            account:'testuser',
                            name:'用户',
                            idcardno:'610103195602030011',
                            sex:'1',
                            rolename:'网约车用户',
                            passtips:'1',
                            passtipsvalue:'myname',
                            email:'test139@139.com',
                            telphone:'15031291234',
                            department:'管理处',
                            logintime:'2019-10-27 11:12',
                            registertime:'2019-10-26 11:12'
                        },
                        {
                            id:'3',
                            account:'testuser2',
                            name:'用户2',
                            idcardno:'610103195602030011',
                            sex:'1',
                            rolename:'测试角色',
                            passtips:'1',
                            passtipsvalue:'myname',
                            email:'test139@139.com',
                            telphone:'15031291234',
                            department:'管理处',
                            logintime:'2019-10-27 11:12',
                            registertime:'2019-10-26 11:12'
                        }
                    ]
                },
                {
                    userid:1101,
                    children:[
                        {
                            id:'4',
                            account:'changcheng',
                            name:'西安长城出租公司',
                            idcardno:'610103195602030011',
                            sex:'1',
                            rolename:'普通用户',
                            passtips:'1',
                            passtipsvalue:'myname',
                            email:'test139@139.com',
                            telphone:'15031291234',
                            department:'管理处',
                            logintime:'2019-10-27 11:12',
                            registertime:'2019-10-26 11:12'
                        }
                    ]
                },
                {
                    userid:1102,
                    children:[
                        {
                            id:'5',
                            account:'fuhua',
                            name:'福华公司',
                            idcardno:'610103195602030011',
                            sex:'1',
                            rolename:'普通用户',
                            passtips:'1',
                            passtipsvalue:'myname',
                            email:'test139@139.com',
                            telphone:'15031291234',
                            department:'管理处',
                            logintime:'2019-10-27 11:12',
                            registertime:'2019-10-26 11:12'
                        }
                    ]
                },
                {
                    userid:1103,
                    children:[
                        {
                            id:'6',
                            account:'ailisi',
                            name:'爱丽丝公司',
                            idcardno:'610103195602030011',
                            sex:'1',
                            rolename:'普通用户',
                            passtips:'1',
                            passtipsvalue:'myname',
                            email:'test139@139.com',
                            telphone:'15031291234',
                            department:'管理处',
                            logintime:'2019-10-27 11:12',
                            registertime:'2019-10-26 11:12'
                        }
                    ]
                }
            ]
        }
    },
    watch:{
        suggest(val) {
            this.$refs.menus.filtrateList(val);
        }
    },
    components:{
        Menus
    },
    computed:{
    },
    mounted(){
        let allUser = [];
        this.testData.map(item=>{
            item.children.map(child=>{
                allUser.push(child);
            })
        });
        this.tabledata = allUser;
        /**test */
        this.beforeSearchData = this.tabledata;
    },
    methods:{
        getPasstips(name){
            let _obj = {
                '1':'我的名字',
                '2':'我的生日',
                '3':'我的身份证号码',
                '4':'我喜欢的人',
                '5':'其它'
            }
            return _obj[name] || _obj['5'];
        },
        getStatename(state){
            return state === false?'禁用':'启用';
        },
        getSexname(state){
            return state === '0'?'女':'男';
        },
        choosetree(a,b){
            a = a || {};
            let noChidren = true;
            this.testData.map(item=>{
                if(item.userid == a.userId){
                    noChidren = false;
                    this.tabledata = item.children || []
                }
            });
            if(noChidren){
                this.tabledata = [];
            }
            this.beforeSearchData = this.tabledata;
        },
        delUser(){
            let arry = this.$refs.userlist.selection;
            if(arry.length == 0){
                this.$message({
                    message: '请先选中用户后再进行操作！',
                    type: 'info',
                    duration:1500
                });
                return;
            }
            this.$confirm('确定要删除选中的用户吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                arry.map(children=>{
                    this.tabledata.map((item,index)=>{
                        if(children.id == item.id){
                            this.tabledata.splice(index,1);
                        }
                    })
                });
                /**test */
                this.beforeSearchData = this.tabledata;
                /**test end */
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {         
            });
        },
        resetPassword(){
            let arry = this.$refs.userlist.selection;
            if(arry.length == 0){
                this.$message({
                    message: '请先选中用户后再进行操作！',
                    type: 'info',
                    duration:1500
                });
                return;
            }
            this.$confirm('确定要重置选中用户的密码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                arry.map(children=>{
                    this.tabledata.map((item,index)=>{
                        if(children.id == item.id){
                            //this.tabledata.splice(index,1);
                        }
                    })
                });
                /**test */
                this.beforeSearchData = this.tabledata;
                /**test end */
                this.$message({
                    type: 'success',
                    message: '密码重置成功!'
                });
            }).catch(() => {         
            });
        },
        addUser(){
            let len = this.tabledata.length;
            let id = parseInt(this.tabledata[len-1].id)+1
            this.dialog = Object.assign({},this.dialog,{
                isVisible:true,
                account:'',
                name:'',
                idcardno:'',
                sex:'1',
                rolename:'普通用户',
                passtips:'1',
                passtipsvalue:'',
                email:'',
                telphone:'',
                department:'管理处',
                state:true,
                id:id,
                editindex:-1
            })
        },
        editUser(id){
            this.tabledata.map((item,index)=>{                
                if(item.id == id){
                    this.dialog = Object.assign({},this.dialog,{
                        isVisible:true,
                        account:item.account,
                        name:item.name,
                        idcardno:item.idcardno,
                        sex:item.sex,
                        rolename:item.rolename,
                        passtips:item.passtips,
                        passtipsvalue:item.passtipsvalue,
                        email:item.email,
                        telphone:item.telphone,
                        department:item.department,
                        state:item.state===false?false:true,
                        editindex:index
                    })
                }
            })
        },
        saveUser(){
            let _index = this.dialog.editindex;
            let {isVisible,...userinfo} = this.dialog;
            if(_index != -1){
                this.tabledata.map((item,index)=>{
                    if(index == _index){
                        //this.tabledata[_index] = userinfo;
                        this.$set(this.tabledata,index,userinfo);
                        this.$set(this.beforeSearchData,index,userinfo)
                    }
                })
            }else{
                this.tabledata.push(userinfo)
                this.beforeSearchData.push(userinfo)
            }
            console.log(this.tabledata);
            this.dialog.isVisible = false;
        },
        search(TYPE){

            let that = this;
            let searchData = {
            "pageNum":this.page.now,
            "pageLength":this.page.pagesize,
            "queryParam":{}
            };
            if(TYPE){
                that.searchstatus = true;
            }
            /**test */
            let keyword = this.form.keyword;           
            let newArry = [];
            this.beforeSearchData.map(item=>{
                let account = item.account || '';
                let name = item.name || '';
                let passtipsvalue = item.passtipsvalue || '';

                let menuUrl = item.menuUrl || '';
                if(account.indexOf(keyword)!= -1 || name.indexOf(keyword)!= -1 || passtipsvalue.indexOf(keyword)!= -1 ){
                    newArry.push(item);
                }
            })
            setTimeout(()=>{
                that.tabledata = newArry;
                that.searchstatus = false;
            },500)
            return;
            /**test end*/
            if(!ispage){ 
                for(let obj in this.form){
                    if(this.form[obj] != ""){
                        searchData.queryParam[obj] = this.form[obj]
                    }
                }
            }else{
                searchData.queryParam = that.searchobj;
            }
            gogo();
            function gogo(){
                
            }
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        }
    }
    
}
</script>
<style lang="scss" scoped>
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.system-hmax{
    height: 100%;
    box-sizing: border-box;
    .system-side{
        margin-top:20px;
        border: 1px dashed $BorderColor;
        transition: width .5s;
        .system-side-con{
            padding:5px 10px;
            height: calc(100% - 40px);
            .system-side-scroll{
                height:calc(100% - 30px) ;
                overflow: hidden;
            }
        }
    }
    .system-wide{
        //margin-left:10px;
        border: 1px dashed $BorderColor;
        position: relative;
        box-sizing: border-box;
        height:100%;
        .system-wide-table{
            padding: 0 5px;
        }
    }
    .system-title{line-height: 30px;background-color: #deecfd;padding:0 10px;color:$Color; }
    .pagination{
        position: absolute;left:0;bottom:10px;padding:0 10px;
    }
    
}
</style>